/**
 * Created by FreezeSoul on 2018/10/16.
 */
define([
    "app/core/base",
    "app/core/util",
    "../../controls/common/commonMeta",
    "jquery",
    "underscore",
    'JSONParse',
    'loglevel',
    'jqueryTmpl'
], function (Chart, Util, Meta, $, _, JSON, log) {

    var property = {
        config: "property",
        option: [
            {
                group: '基础',
                id: 'title',
                name: '主标题',
                enable: false,
                type: 'text',
                value: '',
                default: '',
                link: 'title',
                tooltip: '主标题'
            },
            {
                group: '基础',
                id: 'layout',
                name: '布局',
                enable: false,
                type: 'select',
                value: 'horizontal',
                default: 'horizontal',
                data: [
                    {
                        value: 'vertical',
                        text: '垂直'
                    },
                    {
                        value: 'horizontal',
                        text: '水平'
                    }
                ],
                link: 'layout',
                tooltip: '布局'
            },
            {
                group: '基础',
                id: 'icon',
                name: '图标',
                enable: false,
                type: 'select',
                value: 'arrow1',
                default: 'arrow1',
                data: [
                    {
                        value: 'arrow1',
                        text: '箭头'
                    },
                    {
                        value: 'cengdie',
                        text: '层叠'
                    },
                    {
                        value: 'diaoche',
                        text: '吊车'
                    },
                    {
                        value: 'diaoche2',
                        text: '塔架'
                    },
                    {
                        value: 'dunpai',
                        text: '盾牌'
                    }, {
                        value: 'shijian',
                        text: '时间'
                    },
                    {
                        value: 'shuxian',
                        text: '竖线'
                    }
                ],
                link: 'icon',
                tooltip: '图标'
            },
            {
                group: '基础',
                id: 'value',
                name: '值对象',
                enable: false,
                type: 'number',
                value: 0,
                default: 0,
                link: 'value',
                tooltip: '值对象初始值'
            },
            {
                group: '基础',
                id: 'fontColor',
                name: '值颜色',
                enable: false,
                type: 'color',
                value: '#000000',
                default: '#000000',
                link: 'fontColor',
                tooltip: '值字体颜色'
            },
            {
                group: '绑定',
                id: 'binding',
                name: '绑定值对象',
                enable: false,
                type: 'textBinding',
                dataset: '',
                ctype: 'all',
                column: {},
                tooltip: '值对象绑定'
            },
            {
                group: '事件',
                id: 'LabelClick',
                name: '点击跳转事件',
                enable: true,
                type: 'pivotEvent',
                value: {
                    Event: "LabelClick",
                    Params: [
                        {Value: "Value", Name: "数值"}
                    ]
                },
                tooltip: '点击跳转事件，钻取设置'
            }
        ].concat($.extend(true, [], Meta.commonProperties)),
        MapOption: function (option) {
            Util.linkOption(this.option, option);
        }
    };

    var label = Chart.extend({
        constructor: function (layout) {
            this._layout = layout;
            this._label = null;
            this._container = null;
            this._template = '<div class="tile-label-2" style="${tile_label_2}">' +
                '<div class="tile-label-2-title" style="${tile_label_2_title}"><span style="${title_label_2_title_banner}">|</span><span style="${tile_label_2_title_span}">${title}</span></div>' +
                '<div class="tile-label-2-content" style="${tile_label_2_content}">' +
                '<div class="tile-label-2-content-left" style="${tile_label_2_content_left}"><img style="${tile_label_2_content_left_img}" src="${icon}"/></div>' +
                '<div class="tile-label-2-content-right" style="${tile_label_2_content_right}"><div class="tile-label-2-content-right-value" style="${tile_label_2_content_right_value}">${textPrefix}${value}${textPostfix}</div></div>' +
                '</div>' +
                '<div class="tile-label-2-bottom" style="${tile_label_2_bottom}"></div> ' +
                '</div>';

            this._option = {
                Series: [],
                Events: [],
                Extend: $.extend(true, {}, property),
                Option: {
                    uuid: '',
                    class: '',
                    display: true,
                    value: '570',
                    title: '三证完成率',
                    fontColor: '#3285E2',
                    titleBgColor: '#051325',
                    contentBgColor: '#0F1D34',
                    textPrefix: "",
                    textPostfix: "",
                    icon: 'arrow1',
                    layout: 'horizontal',
                    initScript: '',
                    disposeScript: ''
                }
            };
        },
        init: function (element) {
            try {
                this._container = element;
            } catch (e) {
                log.error(e);
            }
        },
        _readProperty: function () {
            try {
                if (!this._option.Extend) return;
                Util.deepMapOption(property, this._option.Extend, this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        _render: function (option) {
            var optionCopy = $.extend(true, {}, option);
            if (!optionCopy.icon) optionCopy.icon = "arrow1";
            optionCopy.tile_label_2 = "height: 100%;position: relative;";
            optionCopy.title_label_2_title_banner = "color: #006DB5;font-weight: bolder;margin-right: 10px;";
            optionCopy.tile_label_2_title = "color: #FFFFFF;height: 30px;line-height: 30px;text-align: left;font-size: 14px;padding-left: 10px;background-color: " + optionCopy.titleBgColor + ";";
            optionCopy.tile_label_2_title_span = "color: #ffffff;";
            optionCopy.tile_label_2_content = "position:absolute;left:0;right:0;bottom:0px;top:30px;color:#ffffff;background-color:" + optionCopy.contentBgColor + ";";
            if (optionCopy.layout === "vertical") {
                optionCopy.tile_label_2_content_left = "position:absolute;top:0;height:60%;width:100%;text-align:center;line-height: 60%;";
            }
            else {
                optionCopy.tile_label_2_content_left = "position:absolute;left:0;height:100%;right:60%;";
            }
            if (optionCopy.layout === "vertical") {
                optionCopy.tile_label_2_content_left_img = "width:24px;height:24px;position:absolute;top:50%;left:50%;margin-top: -15px;margin-left: -12px;";
            } else {
                optionCopy.tile_label_2_content_left_img = "width:24px;height:24px;position:absolute;top:50%;left:50%;margin-top:-17px;margin-left:-4px;";
            }
            if (optionCopy.layout === "vertical") {
                optionCopy.tile_label_2_content_right = "position:absolute;bottom:0;height:40%;width:100%;text-align:center;line-height: 40%;";
            } else {
                optionCopy.tile_label_2_content_right = "position:absolute;right:0;height:100%;left:40%;text-align: center;";
            }
            optionCopy.tile_label_2_content_right_value = "position:absolute;left:0;right:0;top:50%;font-size:20px;line-height:30px;font-weight:bolder;margin-top:-20px;" + "color:" + optionCopy.fontColor;
            optionCopy.tile_label_2_bottom = "position:absolute;left:0;right:0;bottom:0px;height:5px;background-size: cover;background-image:url(app/plugins/project/tilelabel-1/images/colorborder.png);";
            optionCopy.icon = "app/plugins/project/tilelabel-2/images/" + optionCopy.icon + ".png";

            var $element = $.tmpl(this._template, optionCopy);
            $(this._container).empty();
            $element.appendTo(this._container);
            this._bindEvent($element);

            //Util.setCommonMeta(this, this._container, this._option.Option);
            //Util.initChartLifeTime(this, this._container, this._option.Option);

            return $element;
        },
        _bindEvent: function (element) {
            var _this = this;
            $(element).on("click", function (e) {
                if (_this._layout
                    && _this._layout.navigate
                    && _this._option.Events
                    && _this._option.Events.length > 0) {

                    var registerEvent = _.findWhere(_this._option.Events, {Event: "LabelClick"});
                    if (registerEvent) {
                        var pageId = registerEvent.PageId;
                        var params = registerEvent.Params;
                        var args = [];
                        var dParam = _.findWhere(params, {Value: "Value"});
                        if (dParam && dParam.ParamName) {
                            args.push({
                                ParamName: dParam.ParamName,
                                ParamValue: $(element).find(".label-count").text()
                            });
                        }
                        _this._layout.navigate(pageId, args);
                    }
                    e.preventDefault();
                }
            });
        },
        example: function () {
            try {

                var exampleOption = {
                    value: '570',
                    title: '三证完成率',
                    fontColor: '#3285E2',
                    titleBgColor: '#051325',
                    contentBgColor: '#0F1D34'
                };

                this._label = this._render(exampleOption);
            } catch (e) {
                log.error(e);
            }
        },
        _bindData: function (data) {
            var bindProperty = _.findWhere(this._option.Extend.option, {type: 'textBinding'});
            if (!bindProperty || !bindProperty.dataset) return;
            var dataSetCode = bindProperty.dataset;
            var table = data[dataSetCode];
            if (table && table.length > 0 && bindProperty.column) {
                var row = table[0];
                var columnName = bindProperty.column.ColumnName;
                if (columnName) {
                    this._option.Option.value = row[columnName];
                }
            }
        },
        setData: function (data) {
            try {
                this._readProperty();

                if (data
                    && this._option.Binding
                    && this._option.Binding.length > 0
                    && this._option.Extend
                ) {
                    this._bindData(data);
                }
                this._label = this._render(this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        setOption: function (option) {
            try {
                return this._option = $.extend(true, {}, option);
            } catch (e) {
                log.error(e);
            }
        },
        getOption: function () {
            try {
                this._readProperty();
            } catch (e) {
                log.error(e);
            }
            return this._option;
        },
        setTheme: function (theme) {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        resize: function () {
            try {
            } catch (e) {
                log.error(e);
            }
        },
        showLoading: function () {
            try {
                if (this._layout && this._layout.showLoading) {
                    this._layout.showLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        hideLoading: function () {
            try {
                if (this._layout && this._layout.hideLoading) {
                    this._layout.hideLoading(this);
                }
            } catch (e) {
                log.error(e);
            }
        },
        dispose: function () {
            try {
                $(this._label).off().remove();
                //Util.disposeChartLifeTime(this, this._container, this._option.Option);
            } catch (e) {
                log.error(e);
            }
        },
        getElement: function () {
            return this._label;
        },
        getChart: function () {
            return this._label;
        }
    });

    return {
        Chart: label,
        Property: property
    };
});